import { Button } from 'antd';
import React from 'react'
import RefChild from './ref';
import ToolBar from './toolbar';
import {Demo, Fish, move, combine, Box, extendsDemo, getProperty} from '../utils/demo';
import { Fish as Fishs } from './types';


export const MyContent = React.createContext('默认按钮')

export default function DraftApp() {

	// const inputRef = React.createRef<HTMLInputElement>();
	const buttonRef = React.useRef();
	const inputRef = React.useRef<HTMLInputElement>(null);
	React.useEffect(()=>{
		inputRef.current?.focus()
		// console.log(buttonRef)
	})

	const inputElm = document.querySelector('.cancelEvent');
	// console.log(inputElm)
	inputElm?.addEventListener('keypress',(e)=>{
		//@ts-ignore
		if(e.keyCode < 97 || e.keyCode > 122){
			e.preventDefault()
		}
	},false)

	Demo(null);
	const fish:Fish = {
		swim: ()=>(console.log("456"))
	};
	move(fish);

	console.log(combine<string | number>([1,2,3],['hello']));

	const title: Box = {
		contents: 'title'
	}
	console.log(typeof title.contents)

	extendsDemo({ length: 10, value: 3 })

	let x = { a: 1, b: 2, c: 3, d: 4, "h":5 };
	getProperty(x,"d")

	const carp:Fishs = {
		name: 'red_carp',
		age: 2,
		hobby: 'swimming'
	}

	console.log('carp :>> ', carp);

	return (
		<div>
			<input type="text" className="cancelEvent" />
			<RefChild inputRef={inputRef}/>
			<img src="/logo192.png" alt="123"/>
			<MyContent.Provider value='危险按钮'>
				<ToolBar/>
			</MyContent.Provider>
			<FancyButton ref={buttonRef} onClick={()=> alert}>click me!</FancyButton>
			<FancyInput  ref={inputRef}/>
			<Button onClick={()=>inputRef.current?.focus()}>点我聚焦</Button>
		</div>
	)
}

// React.forwardRef<any,React.HTMLAttributes<HTMLButtonElement>>(function FancyButton(props,ref){
// 	return (
// 		<button ref={ref}>{props.children}</button>
// 	)
// });

const FancyButton = React.forwardRef<any,React.HTMLAttributes<HTMLButtonElement>>((props, ref) => (
  <Button ref={ref} className="FancyButton">
    {props.children}
  </Button>
));

const FancyInput = React.forwardRef<any, React.HTMLAttributes<HTMLInputElement>>((props,ref)=>{
	const inputRef = React.useRef<HTMLInputElement>(null);
	React.useImperativeHandle(ref,()=>({
		focus: ()=>{
			inputRef.current?.focus();
		}
	}))
	return <input ref={inputRef}/>
})

